<template>
  <div class="form-index-container">
    <div class="fd-nav">
      <div class="fd-nav-left">
        <div class="fd-nav-back" @click="backFormProject"><i class="anticon anticon-left"></i></div>
        <div class="fd-nav-title" @click="backFormProject">问卷表单设计器</div>
      </div>
      <div class="fd-nav-center">
        <div class="fd-nav-container">
          <div class="ghost-bar" :style="{ 'transform': activeTranslateX}"></div>
          <div  :class="activeRoute===menuItem.route ? 'fd-nav-item active' : 'fd-nav-item'" @click="handleMenuActiveClick(menuItem.route,index)"  v-for="(menuItem, index) in menuItemList" :key="menuItem.route" :index="menuItem.route"><span class="order-num">{{index+1}}</span>{{menuItem.title}}</div>
        </div>
      </div>
      <div class="fd-nav-right">
        <button type="button" class="ant-btn button-preview" @click="previewDialogVisible=true"><span>设计预览</span></button>
        <button type="button" class="ant-btn button-publish" v-hasPermi="['saveFormProjectTemplate']" @click="handleAdd"><span>保存为模板</span></button>
      </div>
    </div>
    <div style="height: 60px"></div>

    <div class="form-main-container">
 <!--      <div class="left-menu-container">
         <el-menu :collapse="isCollapse" :default-active="defaultActiveMenu"
                  class="el-menu-vertical"
                  @select="menuSelectHandle"
         >
           <el-menu-item v-for="menuItem in menuItemList" :key="menuItem.route" :index="menuItem.route">
             <i :class="menuItem.icon" />
             <span slot="title"> menuItem.title </span>
           </el-menu-item>
         </el-menu>
         <i v-if="!isCollapse" class="el-icon-d-arrow-left" @click="collapseHandle" />
         <i v-else class="el-icon-d-arrow-right" @click="collapseHandle" />
       </div>-->
      <div class="right-content-containerNew">
        <router-view />
      </div>
    </div>

    <el-dialog :visible.sync="previewDialogVisible" destroy-on-close fullscreen>
      <pre-view :key="previewKey" :preview-qrcode="true" />
    </el-dialog>
    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="addUpdateOpen" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="addUpdateOpenRules"  label-width="80px">

        <el-form-item label="模板分类" prop="categoryId">
          <el-select v-model="form.categoryId" clearable style="width: 100%;" placeholder="请选择">
            <el-option key="" label="全部" value=""/>
            <el-option
              v-for="item in categoryList"
              :key="item.categoryId"
              :label="item.categoryName"
              :value="item.categoryId"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="模板名称" prop="projectName">
          <el-input :hide-required-asterisk="true" autocomplete="off" v-model="form.projectName" placeholder="请输入模板名称,50个字符长度" maxlength="50" />
        </el-form-item>

        <el-form-item label="模板封面" prop="coverImg" ref="coverImg">
          <el-upload
            ref="image"
            class="avatar-uploader"
            action="#"
            :auto-upload="false"
            accept="image/jpeg,image/gif,image/png,image/jpg"
            :on-change="requestUpload"
            :show-file-list="false">
          <img v-if="form.coverImg" :src="form.coverImg"  class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancelAddUpdateOpen">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import PreView from '@/views/duojuhe/form/preview'
import {queryNormalSelectFormCategoryResList } from '@/api/form/formCategory'
import {saveFormProjectTransferTemplate} from '@/api/form/formProjectTemplate'
export default {
    name: 'formIndex',
    components: {PreView},
    data() {
        return {
            previewKey: +new Date().getTime(),
            previewDialogVisible: false,
            defaultActiveMenu: 'editor',
            projectId: null,
            isCollapse: false,
            activeRoute:'/project/form/editor',
            activeTranslateX:"translateX(0px)",
            // 弹出层标题
            title: "",
            //模板分类
            categoryList:[],
            // 是否显示新增修改弹出层
            addUpdateOpen: false,
            // 增加修改表单参数
            form: {},
            // 新增修改表单校验
            addUpdateOpenRules: {
              projectName: [
                { required: true, message: "模板名称不能为空",trigger: "blur" },
              ],
              coverImg: [
                { required: true, message: "模板封面必须上传"},
              ],
              categoryId: [
                { required: true, message: "模板分类必须选择"},
              ]
            },
            menuItemList: [
                {
                    title: '表单设计',
                    icon: 'el-icon-edit',
                    route: '/project/form/editor'
                },
                {
                    title: '显示逻辑',
                    icon: 'el-icon-menu',
                    route: '/project/form/logic'
                }, {
                    title: '外观设置',
                    icon: 'el-icon-view',
                    route: '/project/form/theme'
                },
                {
                    title: '高级配置',
                    icon: 'el-icon-setting',
                    route: '/project/form/setting'
                },
                {
                    title: '问卷发布',
                    icon: 'el-icon-video-play',
                    route: '/project/form/publish'
                }, {
                    title: '数据统计',
                    icon: 'el-icon-data-line',
                    route: '/project/form/statistics'
                }
            ]
        }
    },
    created() {
        this.previewKey = +new Date().getTime()
        this.projectId = this.$route.query.key
        this.activeRoute = this.$route.path
        this.isCollapse = this.$store.state.form.isCollapse
        this.initMenuActiveClick()
    },
  methods: {
        initMenuActiveClick() {
          if (this.activeRoute){
            for (let i=0; i<this.menuItemList.length; i++){
              let item = this.menuItemList[i]
              if (this.activeRoute===item.route){
                this.activeTranslateX = "translateX("+i*150+"px)"
                break;
              }
            }
          }
        },
        handleMenuActiveClick(route,index) {
          if (route){
            this.activeRoute = route;
            this.activeTranslateX = "translateX("+index*150+"px)"
            this.$router.replace({path: route, query: {key: this.projectId}}).catch(err => err)
          }
        },
        backFormProject(){
          this.$router.replace({path:'/formAdmin/formProjectAdmin'})
        },

        menuSelectHandle(index) {
          this.$router.replace({path: index, query: {key: this.projectId}}).catch(err => err)
        },

        openPreviewHandle() {
            this.previewKey = +new Date().getTime()
            this.previewDialogVisible = true
        },
        collapseHandle() {
            let isCollapse = !this.isCollapse
            this.$store.dispatch('form/setIsCollapse', isCollapse).then(() => {
                this.isCollapse = isCollapse
            })
        },
        /** 新增按钮操作 */
        handleAdd() {
          this.reset();
          this.queryNormalSelectFormCategoryResList();
          this.addUpdateOpen = true;
          this.title = "保存为模板";
        },
        // 取消修改增加弹出层按钮
        cancelAddUpdateOpen() {
          this.addUpdateOpen = false
        },
      /** 提交保存按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.projectId) {
              saveFormProjectTransferTemplate(this.form).then(response => {
                this.$modal.msgSuccess(response.message)
                this.addUpdateOpen = false
              });
            }
          }
        });
      },
      // 表单重置
      reset() {
        this.form = {
          projectId: this.projectId,
          projectName: undefined,
          coverImg: undefined,
          categoryId: undefined
        };
        this.resetForm('form')
      },
        //上传封面图
        requestUpload(file) {
          let that = this
          const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
          const isJPG = typeArr.indexOf(file.raw.type) !== -1;
          if (!isJPG) {
            this.$message.error('只能是图片!');
            return;
          }
          const isLt1M = file.size / 1024 / 1024 < 1;
          if (!isLt1M) {
            this.$message.error('上传模板封面大小不能超过 1M!');
            return
          }
          let reader = new FileReader();
          reader.readAsDataURL(file.raw);
          reader.onload = function(e){
            that.form = {
              ...that.form,
              coverImg: this.result
            }
            that.$refs["coverImg"].clearValidate()
          }
        },

      /** 查询模板分类 */
      queryNormalSelectFormCategoryResList() {
        queryNormalSelectFormCategoryResList({}).then(res => {
            this.categoryList = res.data
          }
        )
      }
    }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/workflow/workflow.css";
.form-index-container {
  height: 100%;
  width: 100%;
}


::v-deep .el-card__body {
  padding: 0;
}

::v-deep .el-menu {
  border: none;
  background-color: transparent;
}

.header-container {
  width: 100%;
/*  height: 50px;
  padding: 0 20px;*/

  .el-icon-back {
    font-size: 22px;
    font-weight: 550;
    cursor: pointer;
    color: #000;
    margin-right: 25px;

    &:hover {
      color: rgb(32, 160, 255);
    }
  }

  .header-logo {
    height: 30px;
    width: 200px;
  }
}

.form-main-container {
  width: 100%;
 // height: calc(100vh - 60px);
  display: flex;
  flex-direction: row;

  .right-content-container {
    width: calc(100vw - 100px);
    height: calc(100vh - 60px);
    overflow-x: hidden;
  }

  .right-content-containerNew {
    width: calc(100vw);
    height: calc(100vh - 60px);
    overflow-x: hidden;
  }
}

.left-menu-container {
  max-width: 100px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: solid 1px #e6e6e6;

  .el-menu-vertical:not(.el-menu--collapse) {
    width: 100px;
    min-height: 400px;
  }

  .el-icon-d-arrow-left,
  .el-icon-d-arrow-right {
    font-size: 19px;
    cursor: pointer;
    font-weight: 550;
    color: #000;
    margin-bottom: 100px;

    &:hover {
      color: rgb(32, 160, 255);
    }
  }
}

::v-deep.preview-container {
  background-color: #ffffff;
}


.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  line-height: 178px;
  display: block;
}
</style>
